<template lang="html">
  <div class="">
    <p class='can_p' @click = "setDate" >{{ oYear }}年{{ oMonth }}月</p>
  </div>
</template>

<script>
export default {
  props:['oYear','oMonth','func'],
  // data(){
  //   return{
  //    modelnames:''
  //   }
  //
  // },
  methods:{
    setDate(){
          let vm = this;
          var _this = this;

         this.$calendar.show({
            startYear:2000,
            endYear:2020,
             onOk(data){
               let oDate = new Date();
               this.nowYear=oDate.getFullYear(),
               this.nowMonth=oDate.getMonth() + 1,
               this.nowDay=oDate.getDate()
                let year = data.split('-')[0];
                let month = data.split('-')[1];
                console.log(data);
                if (year < 2012 && month < 10  || year < 2012) {
                  alert('选择超出范围了')
                  vm.data = '2012-10';
                  _this.func(vm.data)
                }else if (year <= this.nowYear && month <= this.nowMonth || year < this.nowYear && month >= this.nowMonth) {
                   vm.data = year + '-' + month;
                   _this.func(vm.data);
                 }else{
                   vm.data = this.nowYear + '-' + this.nowMonth;
                   _this.func(vm.data);
                   alert('选择超出范围了')
                 }

             },
             onCancel(){
                 console.log('取消')
             }
         })
       }
  }

  // create(){
  //   const oDate = new Date();
  //   this.oYear=oDate.getFullYear();
  //   this.oMonth=oDate.getMonth() + 1;
  //   console.log(this.oYear);
  // }

}
</script>

<style lang="css">
.can_p{
  font-size: 1.5rem;
  text-align: center;
  height: 3rem;
  line-height: 3rem;
}
.com-calendar-box {
  position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 7rem;
    left: 0;
}
.com-mark{
  background: rgba(0, 0, 0, 0.3);
}
.com-calendar{
    position: absolute;
    top: 0rem;
    left: 0;
    z-index: 1000;
    width: 100%;
    background: #fff;
    height: 20rem;
}
/*每个条的高度*/
.com-calendar .scroller-component {
    display: block;
    flex: 1;
    position: relative;
    height: 14rem;
    overflow: hidden;
    width: 100%;
}
/*选中条*/
.com-calendar .scroller-indicator {
    width: 100%;
    height: 2.5rem;
    position: absolute;
    left: 0;
    top: 8.5rem;
    z-index: 2;
    background-image: linear-gradient(180deg,#d0d0d0,#d0d0d0,transparent,transparent),linear-gradient(0deg,#d0d0d0,#d0d0d0,transparent,transparent);
    background-position: top,bottom;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}
/*整个背景*/
.com-calendar .scroller-mask {
    position: absolute;
    left: 0;
    top: 0;
    height: 20rem;
    margin: 0 auto;
    width: 100%;
    z-index: 3;
    /*background-color: pink;*/
     background-image: linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
    background-position: top,bottom;
    background-size: 100% 9rem;
    background-repeat: no-repeat;
}
</style>
